<template>
  <div>
    <h6 style="text-align: center;" v-if="topicList.length<=0">
    <q-icon name="insert emoticon" color="blue"/>空空如也</h6>
   	 <common-compo v-else v-on:trigger-refresh="refresher" 
        :enableScrollLoading="scrollLoading" enableToTop>
        <div v-for="(topic,index) in topicList" :key="topic.id" slot="content" >
          <topic-one-compo :topic=topic :topicIndex=index v-on:topic-delete="handleDeleteAft"></topic-one-compo>
        </div>
   	 </common-compo>
  </div>
</template>

<script>
import { QIcon } from "quasar";
import commonCompo from "../common-compo";
import topicApi from "../../../https/topicApi";
import attentionApi from "../../../https/attentionApi";
import topicOneCompo from "./topic-one-compo";
//数组的角标删除
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};
export default {
  components: {
    topicOneCompo,
    commonCompo,
    QIcon
  },
  data() {
    return {
      scrollEle: null,//滚动元素
      topicList: [],
      page: 0,
      totalPages: 0,
      scrollLoading: false
    };
  },
  props: ["belongId", "belongType"],
  watch: {
    belongId: {
      handler: function() {
        this.clearDatas();
        this.loadData();
      },
      deep: true
    },
    belongType: {
      handler: function() {
        this.clearDatas();
        this.loadData();
      },
      deep: true
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    clearDatas() {
      this.topicList = [];
      this.page=0,
      this.totalPage=0,
      this.scrollLoading=false
    },
    loadData() {
       console.log(this.belongId, "名下的", this.belongType, "的动态");
       //关注 ?size=20&refType=?&topicCate=?&refId=?&lzId=>//ATTENTIONS-HOTS;
       const _self = this;
       const _prelength = _self.topicList.length;
       if (_self.belongType) {
          topicApi
            .list("?size=20&refType=" + _self.belongType + "&page=" + this.page)
            .then(res => {
              const { status,data:{content,totalPages}} = res;
              if (status == 200 && content) {
                _self.totalPages = totalPages;
                _self.topicList = _self.topicList.concat(content);
                _self.isStopRefresher(_prelength,this.topicList.length);
              }
            })
            .catch(err => {});
        }else if (_self.belongId) {
          console.log('所属人：',_self.belongId);
          topicApi
            .list("?size=20&lzId=" + _self.belongId + "&page=" + this.page)
            .then(res => {
              const { status, data:{content,totalPages}} = res;
              if (status == 200 && content) {
                _self.totalPages = totalPages;
                _self.topicList = _self.topicList.concat(content);
                console.log('结果：',_self.topicList);
                _self.isStopRefresher(_prelength,this.topicList.length);
              }
            })
            .catch(err => {});
        }
    },
    handleDeleteAft(_index) {
      console.log('列表中删除topic,索引：',_index);
      if(_index != null) {
        this.topicList.remove(_index);
        console.log('列表中删除topic成功');
      }
    },
    refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>

